<template>
  <div id="jour">
    <div class="jour">
      <div class="head">
        <div class="title">个人信息</div>
      </div>
      <div class="back" @click="back">
        <el-icon>
          <DArrowLeft />
        </el-icon>
      </div>
      <div class="select">
        <div class="BtnOn">
          <span>是否编辑</span>
          <el-switch v-model="passOn" class="switch" style="--el-switch-off-color: transparent" />
        </div>
      </div>
      <div class="body">
        <div class="form">
          <el-form :rules="rules" :model="form" label-width="120px">
            <el-form-item label="日记标题" prop="storyTitle">
              <el-input v-model="form.storyTitle" placeholder="请输入日记标题" :disabled="!passOn" />
            </el-form-item>
            <el-form-item label="幽默标题" prop="humorTitle">
              <el-input v-model="form.humorTitle" placeholder="请输入幽默标题" :disabled="!passOn" />
            </el-form-item>
            <el-form-item label="发生地点" prop="storySite">
              <el-input v-model="form.storySite" placeholder="请输入发生地点" :disabled="!passOn" />
            </el-form-item>
            <!-- 时间 -->
            <el-form-item label="发生时间" prop="storyDate">
              <el-date-picker v-model="form.storyDate" type="date" placeholder="请选择日期" />
            </el-form-item>
            <el-form-item label="故事第一段" prop="storyFirst">
              <el-input v-model="form.storyFirst" type="textarea" placeholder="请描述故事的首段" :rows="7" resize="none" />
            </el-form-item>
            <el-form-item label="故事第二段" prop="storySecond">
              <el-input v-model="form.storySecond" type="textarea" placeholder="请描述故事的第二段" :rows="7" resize="none" />
            </el-form-item>
            <el-form-item label="故事第三段" prop="storyThird">
              <el-input v-model="form.storyThird" type="textarea" placeholder="请描述故事的第三段" :rows="7" resize="none" />
            </el-form-item>
            <el-form-item label="故事总结" prop="storySummary">
              <el-input v-model="form.storySummary" type="textarea" placeholder="请总结一下故事" :rows="7" resize="none" />
            </el-form-item>
            <el-form-item>
              <el-upload v-model:file-list="fileList" action="#" list-type="picture-card" :auto-upload="false"
                :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :limit="3">
                <el-icon>
                  <Plus />
                </el-icon>
              </el-upload>
              <!-- 上传浏览 -->
              <el-dialog v-model="dialogVisible">
                <img class="pImg" :src="dialogImageUrl" alt="预览图片" />
              </el-dialog>
            </el-form-item>
            <el-form-item label="是否为重点日记">
              <el-switch v-model="form.focus" style="
                  --el-switch-on-color: #ff4949;
                  --el-switch-off-color: none;
                " />
            </el-form-item>
            <el-form-item>
              <el-button :disabled="!passOn" @click="EditJ" round>修改</el-button>
              <el-button :disabled="!passOn" round @click="dataList">回退</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { ElMessage, FormRules, UploadProps, UploadUserFile } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
//接受参数
import { useRoute, useRouter } from "vue-router";
//请求参数
import { getOne, EditG } from "../../../../api/index/jour";

const route = useRoute(); //接受参数的route
const queryId = route.query.id;
onMounted(() => {
  dataList();
});
const router = useRouter();
const back = () => {
  router.push("/main/journal/");
};
const fileList = ref<UploadUserFile[]>([
  {
    name: "蔡徐坤",
    url: "https://img2.baidu.com/it/u=3979760922,2797856939&fm=253&fmt=auto&app=138&f=JPEG?w=720&h=405",
  },
  {
    name: "蔡徐坤",
    url: "http://n.sinaimg.cn/sinacn20118/486/w677h609/20190615/8968-hymscpq6138606.jpg",
  },
  {
    name: "蔡徐坤",
    url: "http://n.sinaimg.cn/sinacn20118/399/w786h413/20190615/12d0-hymscpq6139046.jpg",
  },
]);

const passOn = ref(false); //是否开启编辑

const form = ref({
  id: "",
  storyTitle: "",
  humorTitle: "",
  storySite: "",
  storyDate: "",
  storyFirst: "",
  storySecond: "",
  storyThird: "",
  storySummary: "",
  storyimg1: "",
  storyimg2: "",
  storyimg3: "",
  views: "",
  focus: false,
});
const rules = reactive<FormRules>({
  storyTitle: [
    { required: true, message: "请输入日记标题", trigger: "blur" },
    { min: 3, max: 150, message: "不要超过150", trigger: "blur" },
  ],
  humorTitle: [
    { required: true, message: "请输入幽默标题", trigger: "blur" },
    { min: 3, max: 150, message: "不要超过150", trigger: "blur" },
  ],
  storySite: [
    { required: true, message: "请输入发生地点", trigger: "blur" },
    { min: 3, max: 150, message: "不要超过150", trigger: "blur" },
  ],
  storyDate: [{ required: true, message: "请选择发生时间", trigger: "blur" }],
  storyFirst: [
    { required: true, message: "请输入首段", trigger: "blur" },
    { min: 3, max: 150, message: "不要超过150", trigger: "blur" },
  ],
  storySecond: [
    { required: true, message: "请输入副段落", trigger: "blur" },
    { min: 3, max: 150, message: "不要超过150", trigger: "blur" },
  ],
  storyThird: [
    { required: true, message: "请输入第三段", trigger: "blur" },
    { min: 3, max: 150, message: "不要超过150", trigger: "blur" },
  ],
  storySummary: [
    { required: true, message: "请输入总结", trigger: "blur" },
    { min: 3, max: 150, message: "不要超过150", trigger: "blur" },
  ],
});

const EditJ = () => {
  EditG(form.value).then((res) => {
    //成功后
    ElMessage({
      type: "success",
      message: res + "",
    });
    dataList();
  });
};
const dialogImageUrl = ref("");
//显示预览上传的图片
const dialogVisible = ref(false);

//删除图片
const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};
//浏览图片
const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
//DataList
const dataList = () => {
  if (queryId != null) {
    getOne(queryId).then((res) => {
      form.value = res;
    });
  } else {
    console.log("无ID,请检查后端");
  }
};
</script>

<style lang="less" scoped>
#jour {
  width: 100%;
  height: 100%;

  .jour {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    border-image-source: radial-gradient(65% 65%,
        transparent 0px,
        transparent 100%,
        cyan 100%);
    border-image-slice: 1;
    border-width: 2px;
    border-style: solid;
    background: linear-gradient(0deg,
        rgba(white, 0.1),
        rgba(white, 0.3),
        rgba(white, 0.1));

    .head {
      width: 100%;
      height: 10%;
      overflow: hidden;

      .title {
        width: 20%;
        margin: 0 auto;
        height: 80%;
        text-align: center;
        color: aliceblue;
        font-size: 24px;
        line-height: 60px;
        border-bottom: 5px solid aqua;
      }
    }

    .back {
      position: absolute;
      top: 12%;
      width: 50px;
      height: 50px;
      color: aqua;
      font-size: 50px;
      cursor: pointer;
    }

    .select {
      width: 95%;
      height: 5%;
      margin: 0 auto;

      .BtnOn {
        width: 100%;
        height: 100%;

        .switch {}

        span {
          margin-left: 5%;
          margin-right: 0.5%;
          color: aliceblue;
          font-weight: lighter;
          border-bottom: 1px solid aqua;
        }
      }
    }

    .body {
      width: 95%;
      margin: 0 auto;
      height: 85%;
      overflow: hidden;
      overflow-y: scroll;

      &::-webkit-scrollbar {
        width: 2px;
        height: 100%;
      }

      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 2px;
        background: aqua;
      }

      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        border-radius: 2px;
        background: rgba(white, 0.2);
      }

      .form {
        width: 75%;
        margin-left: 10%;

        :deep(.el-form-item__label) {
          color: white;
        }

        :deep(.el-input__wrapper) {
          --el-input-focus-border-color: aqua;

          .el-input__inner {
            color: white;

            &::-webkit-input-placeholder {
              /* WebKit browsers*/
              color: rgba(aqua, 0.5);
            }
          }
        }

        :deep(.el-input__wrapper) {
          background-color: transparent;
        }

        :deep(.el-textarea) {
          // 一下为正常
          background-color: transparent;

          .el-textarea__inner {
            overflow: hidden;
            overflow-y: scroll;

            &::-webkit-scrollbar {
              width: 2px;
              height: 100%;
            }

            &::-webkit-scrollbar-thumb {
              /*滚动条里面小方块*/
              border-radius: 2px;
              background: aqua;
            }

            &::-webkit-scrollbar-track {
              /*滚动条里面轨道*/
              border-radius: 2px;
              background: rgba(white, 0.2);
            }

            background-color: transparent;
            --el-input-focus-border-color: aqua;
            color: white;

            &::-webkit-input-placeholder {
              /* WebKit browsers*/
              color: rgba(aqua, 0.5);
            }
          }
        }

        :deep(.el-button) {
          margin: 0 auto;
          width: 30%;
          background-color: transparent;
          color: white;

          &:first-child {
            --el-button-border-color: aqua;
            --el-button-active-border-color: aqua;
            --el-button-hover-text-color: aqua;
            --el-button-divide-border-color: aqua;
          }
        }

        :deep(.el-dialog) {
          width: 30%;
          --el-dialog-bg-color: rgba(255, 119, 0, 0.1);
          border-image-source: radial-gradient(65% 65%,
              transparent 0px,
              transparent 100%,
              orange 100%);
          border-image-slice: 1;
          border-width: 2px;
          border-style: solid;

          .el-dialog__title {
            color: orange;
          }

          .el-dialog__close {
            color: orange;

            &:hover {
              color: red;
            }
          }

          .el-dialog__body {
            span {
              color: white;
            }
          }

          .pImg {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
